<style lang="less">
  #news-home-page-detail {
    background: #3d3936 url(~@/assets/new-house/new_house_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .news-detail-wrapper {
      min-height: 500px;
      background: #fff;
      padding: 3em 0;
      margin-top: 7em;
      .newses-content {
        width: 1190px;
        margin: 0 auto;
        h1 {
          text-align: center;
          border-bottom: dotted 1px #ccc;
          padding-bottom: 1.5em;
          margin: 0 1em 2em 1em;
        }
        .content {
          padding: 0 3em;
          white-space: pre-wrap;
          font-size: 120%;
          line-height: 180%;
        }
        .preOrNext{ 
          padding: 0 3em;
          margin-top: 1.5em;
        }
      }
    }
  }
</style>
<template>
  <div id="news-home-page-detail">
    <Navigator></Navigator>
    <div class="news-detail-wrapper">
      <div class="newses-content">
        <Spin size="large" v-if="spinShow"></Spin>
        <div v-if="!spinShow">
          <h1>{{news.title}}</h1>
          <div class="content" v-html="news.content"></div>
          <div class="preOrNext">
           <router-link :key='prevNews.id' :to="{name:'newsDetail', params: {id: prevNews.id}}">
              上一篇：{{prevNews.title}}
            </router-link>
          </div>
          <div class="preOrNext">
            <router-link :key='nextNews.id' :to="{name:'newsDetail', params: {id: nextNews.id}}">
              下一篇：{{nextNews.title}}
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
  import api from '@/service/api'

  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keyword: '',
        spinShow: false,
        news: {},
        newsId: this.$router.currentRoute.params.id,
        prevNews:{},
        nextNews:{}
      }
    },
    methods: {
      search () {
        if (!this.newsId) {
          return
        }
        this.spinShow = true
        api.newsDetail(this.newsId).then((res) => {
          this.spinShow = false
          this.news = res.data.news
          this.prevNews = res.data.pre
          this.nextNews = res.data.next
          Vue.nextTick(() => {
            document.body.scrollTop = 0
          })
        })
      }
    },
     beforeRouteUpdate (to, from, next) {
      this.newsId = to.params.id 
      next()
    },
    watch: {
      newsId () {
        document.body.scrollTop = 0
        this.search()
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

